<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>托克托县人民法院案件精细化管理数据分析大屏</title>
    <link rel="stylesheet" href="css/main.css?version=20231106001" />
    <script src="js/vue.min.js" type="text/javascript"></script>
</head>

<body id="app">

<div class="bigscreen">

    <div class="nav">
        <div class="nav_time"><span id="timeStr"><!--数据更新时间：2023-12-02 12:23:04--></span></div>
        <div class="nav_title">托克托县人民法院案件精细化管理数据分析大屏</div>
        <div class="nav_btn"></div>
    </div>

    <div style="width:486px;">

        <!-- 第一块 -->
        <div class="module module1">
            <div class="module_border">
                <div class="module_main">

                    <div class="module_bar"><font>法官案件情况统计</font></div>

                    <div class="judgelist">
                        <a v-for="row in userRows">
                            <p class="num">{{$index+1}}</p>
                            <p class="name">{{row.userName}}</p>
                            <p class="sum">案件总量：<font>{{row.total}}件</font></p>
                            <p class="yq">逾期案件数量：<font>{{row.total3}}件</font></p>
                        </a>

                    </div>

                </div>
            </div>
        </div>
        <!-- /第一块 -->

        <!-- 第四块 -->
        <div class="module module4">
            <div class="module_border">
                <div class="module_main">

                    <div class="module_bar"><font>案件数量占比分析</font></div>

                    <div class="chart chart1" id="chart1"></div>

                    <div class="items">
                        <div class="item item1"><p></p><span>刑事案件 {{courtData.typeTot2}}件<font>({{courtData.typeRate2}}%)</font></span></div>
                        <div class="item item2"><p></p><span>民事案件 {{courtData.typeTot1}}件<font>({{courtData.typeRate1}}%)</font></span></div>
                        <div class="item item3"><p></p><span>执行案件 {{courtData.typeTot3}}件<font>({{courtData.typeRate3}}%)</font></span></div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /第四块 -->

    </div>


    <div style="width:890px;">
        <!-- 第二块 -->
        <div class="module module2">
            <div class="module_border">
                <div class="module_main">

                    <div class="nums">
                        <a><p>进行中案件</p><font>{{courtData.total1+courtData.total3}}</font></a>
                        <a><p>已完成案件</p><font>{{courtData.total2}}</font></a>
                        <a><p>刑事案件</p><font>{{courtData.typeTot2}}</font></a>
                        <a><p>民事案件</p><font>{{courtData.typeTot1}}</font></a>
                        <a><p>执行案件</p><font>{{courtData.typeTot3}}</font></a>
                    </div>

                    <div class="map_chart" id="map_chart"></div>

                    <div class="list">

                        <div class="list_jjyq">
                            <p>即将逾期案件预警</p>
                            <div class="list_jjyq_a">
                                <a v-for="row in eventRows1">{{row.name}}</a>
                            </div>
                        </div>

                        <div class="list_yyq">
                            <p>已逾期案件预警</p>
                            <div class="list_yyq_a">
                                <a v-for="row in eventRows2">{{row.name}}</a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <!-- /第二块 -->

        <!-- 第五块 -->
        <div class="module module5">
            <div class="module_border">
                <div class="module_main">

                    <div class="module_bar"><font>近7天各类案件数量趋势分析</font></div>

                    <!-- 折线图 -->
                    <div class="chars chart2" id="chart2"></div>
                    <!-- /折线图 -->

                </div>
            </div>
        </div>
        <!-- /第五块 -->

    </div>


    <div style="width:486px;">

        <!-- 第三块 -->
        <div class="module module3">
            <div class="module_border">
                <div class="module_main">

                    <div class="module_bar"><font>案件节点逾期排行分析</font></div>

                    <div class="judgelist">
                        <a v-for="row in overdueRows">
                            <p class="num">{{$index+1}}</p>
                            <p class="name">{{row.taskName}}</p>
                            <p class="sum">逾期次数：<font>{{row.total3}}次</font></p>
                            <p class="yq">逾期率：<font>{{row.overdueRate}}%</font></p>
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <!-- /第三块 -->

        <!-- 第六块 -->
        <div class="module module6">
            <div class="module_border">
                <div class="module_main">

                    <div class="module_bar"><font>案件逾期分析</font></div>

                    <!-- 柱状图 -->
                    <div class="chart chart3" id="chart3"></div>
                    <!-- /柱状图 -->
                    <div class="desc">
                        刑事案件逾期<font>{{overdueCourtData.typeTot2}}</font>件，逾期率为<font>{{overdueCourtData.typeRate2}}%</font>；
                        民事案件逾期<font>{{overdueCourtData.typeTot1}}</font>件，逾期率为<font>{{overdueCourtData.typeRate1}}%</font>；
                        执行案件逾期<font>{{overdueCourtData.typeTot2}}</font>件，逾期率为<font>{{overdueCourtData.typeRate3}}%</font>。
                    </div>

                </div>
            </div>
        </div>
        <!-- /第六块 -->

    </div>

</div>
</body>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/main.js?version=20231106001"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isLoaded:true,
            userRows:[],
            eventRows1:[],
            eventRows2:[],
            courtData:{},
            overdueCourtData:{},
            courtTrendRows:{},
            overdueRows:[]
        }
    });

    $(function(){
        loadCourtData('');
        loadCourtData('3');
        loadUserData();
        loadOverdueData();
        loadCourtTrendData();
        loadEventData('1');
        loadEventData('2');
    });

    //案件概况
    function loadCourtData(status) {
        $.ajax({
            url : "courtData",
            type : "post",
            dataType : "json",
            data : {status:status},
            success : function(resultBean) {
                if(status == ''){
                    app.courtData = resultBean.data;
                    initChart1(app.courtData);
                }else if(status == '3'){
                    app.overdueCourtData = resultBean.data;
                    initChart3(app.overdueCourtData);
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    //法官案件情况统计
    function loadUserData() {
        $.ajax({
            url : "userData",
            type : "post",
            dataType : "json",
            data : {},
            success : function(resultBean) {
                app.userRows = resultBean.data;
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    //法官案件情况统计
    function loadOverdueData() {
        $.ajax({
            url : "overdueData",
            type : "post",
            dataType : "json",
            data : {},
            success : function(resultBean) {
                app.overdueRows = resultBean.data;
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    //案件趋势
    function loadCourtTrendData() {
        $.ajax({
            url : "courtTrendData",
            type : "post",
            dataType : "json",
            data : {},
            success : function(resultBean) {
                app.courtTrendRows = resultBean.data;
                initChart2(app.courtTrendRows);
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    //事件统计
    function loadEventData(eventType) {
        $.ajax({
            url : "eventData",
            type : "post",
            dataType : "json",
            data : {eventType:eventType},
            success : function(resultBean) {
                if(eventType == '1'){
                    app.eventRows1 = resultBean.data;
                }else if(eventType == '2'){
                    app.eventRows2 = resultBean.data;
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });
    }

    // 饼状图
    function initChart1(data){
        var chart1 = echarts.init(document.getElementById("chart1"));
        var option1;
        option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: false,
                top: 'center',
                left: 'center'
            },
            series: [
                {
                    name: '案件数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: data.typeTot2, name: '刑事案件', itemStyle:{color:'#CF322E'} },
                        { value: data.typeTot1, name: '民事案件', itemStyle:{color:'#E87626'} },
                        { value: data.typeTot3, name: '执行案件', itemStyle:{color:'#34C27B'} },
                    ]
                }
            ]
        };
        chart1.setOption(option1);
    }

    // 柱状图
    function initChart3(data){
        var chart3 = echarts.init(document.getElementById("chart3"));
        var option3;
        option3 = {
            grid: {
                left: '1%',
                right: '1%',
                bottom: '0',
                top: '8%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                data: ['刑事案件', '民事案件', '执行案件'],
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                }
            },
            series: [
                {
                    data: [
                        {
                            value: data.typeTot2,
                            itemStyle: {
                                color: '#CF322E'
                            }
                        },
                        {
                            value: data.typeTot1,
                            itemStyle: {
                                color: '#E87626'
                            }
                        },
                        {
                            value: data.typeTot3,
                            itemStyle: {
                                color: '#34C27B'
                            }
                        }
                    ],
                    type: 'bar',
                    barWidth: 50
                }
            ]
        };
        chart3.setOption(option3);
    }

    function initChart2(data){
        // 折线图
        var chart2 = echarts.init(document.getElementById("chart2"));
        var dateRows = [];
        var totalRows = [];
        var typeTot1Rows = [];
        var typeTot2Rows = [];
        var typeTot3Rows = [];
        for(var i=0;i<data.length;i++){
            let row = data[i];
            dateRows.push(row.dateStr);
            totalRows.push(row.total);
            typeTot1Rows.push(row.typeTot1);
            typeTot2Rows.push(row.typeTot2);
            typeTot3Rows.push(row.typeTot3);
        }
        console.log(dateRows);
        var option2;
        option2 = {
            grid: {
                left: '1%',
                right: '1%',
                bottom: '0',
                top: '8%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: dateRows,
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF'
                    }
                }
            },
            series: [
                {
                    name: '案件总数',
                    data: totalRows,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '执行案件',
                    type: 'line',
                    smooth: true,
                    data: typeTot3Rows
                },
                {
                    name: '民事案件',
                    type: 'line',
                    smooth: true,
                    data: typeTot1Rows
                },
                {
                    name: '刑事案件',
                    type: 'line',
                    smooth: true,
                    data: typeTot2Rows
                }
            ]
        };
        chart2.setOption(option2);
    }


</script>

<script type="text/javascript">
    // 地图
    var mapChart = echarts.init(document.getElementById("map_chart"));
    $.get("js/map_data/tuoxian.json", function(geoJson) {

        mapChart.hideLoading();
        echarts.registerMap("托克托县", geoJson);
        mapChart.setOption(option = {

            geo: {

                type: 'map',
                map: '托克托县',

                itemStyle: {
                    normal : {
                        areaColor: '#3A90E9',
                        opacity: 1,
                        borderColor: '#FFFFFF',
                        borderWidth: 1,
                    },
                    emphasis: {
                        areaColor: '#3B79D8',
                        opacity: 1,
                        borderColor: '#FFFFFF',
                        borderWidth: 0,
                        fontWeight: "bold"
                    }
                },
                regions: [ // 自定义各块的颜色
                    {
                        name: '伍什家镇',
                        itemStyle: {
                            normal: {
                                areaColor: '#6A9BE5'
                            }
                        }
                    },{
                        name: '五申镇',
                        itemStyle: {
                            normal: {
                                areaColor: '#488BED'
                            }
                        }
                    },{
                        name: '古城镇',
                        itemStyle: {
                            normal: {
                                areaColor: '#4E98E9'
                            }
                        }
                    },{
                        name: '双河镇',
                        itemStyle: {
                            normal: {
                                areaColor: '#64A0E8'
                            }
                        }
                    },{
                        name: '新营子镇',
                        itemStyle: {
                            normal: {
                                areaColor: '#3A90E9'
                            }
                        }
                    },{
                        name: '黄河湿地管委会',
                        itemStyle: {
                            normal: {
                                areaColor: '#31A046'
                            },
                            emphasis: {
                                areaColor: '#31A046',
                            }
                        }
                    },{
                        name: '托克托工业园区',
                        itemStyle: {
                            normal: {
                                areaColor: '#D97C3C'
                            },
                            emphasis: {
                                areaColor: '#B25A1F',
                            }
                        }
                    }
                ],

                label: {
                    normal : {
                        show : true,
                        textStyle : {
                            fontSize: 13,
                            color : '#FFF',

                        }
                    },
                    emphasis : {
                        show : true,
                        textStyle : {
                            fontSize: 13,
                            color : '#FFF',
                            fontWeight:"bold"
                        }
                    }
                }

            },

        });
    });
</script>

</html>